import QtQuick 1.0

Rectangle {
    id: cookingStepEditor
    width: 300
    height: 520
    color: "#001c17"
    radius: 9
    smooth: true
    border.color: "#ffffff"
    anchors.centerIn: parent
    border.width: 4

    function saveSteps() {

    }

    Component.onCompleted: {
        var step;
        for(var i=1; i<=7; i++)
        {
//            step = engine.method(1, i)
//            stepsListModel.append( {"costTime": step.costTime,
//                                  "description": step.description,
//                                  "picture": step.picture}
//                                  )
        }
    }

    Text {
        id: text1
        y: 10
        color: "#ffffff"
        text: "Edit Steps"
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        font.family: "Hobo Std"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pixelSize: 19
    }

    Image {
        x: 264
        width: 60
        height: 60
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
    }

    Rectangle {
        id: rectangle1
        x: 20
        width: 80
        height: 30
        color: "#188886"
        radius: 10
        anchors.top: text1.bottom
        anchors.topMargin: 6

        Text {
            id: text2
            x: 24
            y: 3
            color: "#ffffff"
            text: "Step1"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            font.family: "Hobo Std"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 18
        }
    }

    Rectangle {
        id: newBtn
        y: 481
        width: 59
        height: 30
        color: "#ffffff"
        radius: 15
        anchors.left: parent.left
        anchors.leftMargin: 12

        Text {
            x: 14
            y: 4
            text: "New"
            font.family: "Hobo Std"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 16
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.debug("New Step")
                //                newIngredient();
            }
        }
    }

    Rectangle {
        x: 227
        y: 481
        width: 59
        height: 30
        color: "#ffffff"
        radius: 15
        anchors.right: parent.right
        anchors.rightMargin: 12

        Text {
            id: text3
            x: 20
            y: 4
            text: "Ok"
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.family: "Hobo Std"
            font.pixelSize: 16
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                cookingStepEditor.visible = false;
            }
        }
    }

    Rectangle {
        id: pageArea
        y: 76
        width: parent.width
        height: 400
        color: "red"
    }

    Text {
        id: text4
        x: 105
        y: 11
        width: 60
        color: "#ffffff"
        text: "1/4"
        styleColor: "#000000"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.family: "Hobo Std"
        font.pixelSize: 18
    }
}
